<template>
	<view class="container">
		
		<view class="es-cell" ></view>
		<es-tabs :current="current" :tabList="tabList" @change="onChange"></es-tabs>
		
		<view class="es-cell" ></view>
		<es-tabs :current="current" :tabList="tabList" activeColor="hotpink" background="hotpink" @change="onChange"></es-tabs>
		
		<view class="es-cell" ></view>
		<es-tabs :current="current" :tabList="tabList" activeColor="#FC295B" background="linear-gradient(90deg, #FB7C6C 0%, #FC295B 100%)" @change="onChange"></es-tabs>
		
		<view class="es-cell" ></view>
		<es-tabs :current="current" :tabList="tabList" activeColor="#1ABBFF" background="linear-gradient(90deg, #34DCFF 0%, #1ABBFF 100%)" @change="onChange"></es-tabs>
		
		<view class="es-cell" ></view>
		<es-tabs :current="current" :tabList="tabList" color="#333333" activeColor="#353535" background="linear-gradient( 89deg, #F8FCA4 0%, #DEFEBD 65%, #CFFBF6 100%)" @change="onChange"></es-tabs>
		
	</view>
</template>

<script>
	import esTabs from '@/components/es-tabs/es-tabs.vue';
	export default {
		components: {
			esTabs
		},
		data() {
			return {
				tabList: [{
						name: "动态"
					},
					{
						name: "问答"
					},
					{
						name: "口碑"
					},
					{
						name: "车主价"
					}
				],
				current:0,
				
			}
		},
		methods:{
			onChange(index){
				this.current = index;
			}
		}
	}
</script>

<style>
	page {
		background-color: #f6f8fb;
	}

	.container {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 100rpx;
	}

	.es-cell{
		width:670rpx;
		font-size: 24rpx;
		color: #B6B6B6;
		margin-top: 80rpx;
		margin-bottom: 30rpx;
	}
	
</style>